<template>
  <el-card>
    <div slot="header">
      <h3>停启用管理-查看</h3>
    </div>
    <div class="view_wrap">
      <el-card class="header_fields_card" shadow="never">
        <el-row>
          <span v-if="isStopPage">停用原因：{{ headerFields.commitReasonTypeStr }}</span>
          <span>原因详情：{{ headerFields.commitReason }}</span>
          <span v-if="isStopPage">区域征求意见OA单据号：{{ headerFields.regionAdviceRecordNo }}</span>
          <span v-if="!isStopPage">是否启用上架：{{ headerFields.isFollowShelfStr }}</span>
        </el-row>
        <!-- 厂家停产展示附件信息 -->
        <el-row v-if="headerFields.commitReasonType == '1'">
          <span>附件：</span>
          <UploadAttachement
            readonly
            :is-file="uploadAttachement.isFile"
            :defaultFiles="uploadAttachement.defaultFiles"
          />
        </el-row>
      </el-card>
      <BasicTable
        :showPagination="false"
        :showSelectCol="false"
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
      />
      <FooterFields
        isSpecialFields
        :footerFields="footerFields"
      />
    </div>
  </el-card>
</template>
<script>
import BasicTable from '@/components/BasicTable';
import FooterFields from '@/pages/commodity/components/FooterFields';
import UploadAttachement from '@/pages/commodity/components/StopOrDownSubmittedDialog/UploadAttachement';
import { getFooterFieldsByReprocessed, getEchoByOptions } from '@/utils/getUtils';
import { STOP_REASON_OPTIONS } from '@/constants/commodity';
import { ATTACHEMENT_TYPE } from '@/pages/commodity/components/StopOrDownSubmittedDialog/constants';
import { getViewDetailsService } from '@/api/commodity/commodityManage/stopOrEnableManage';
export default {
  components: {
    BasicTable,
    FooterFields,
    UploadAttachement,
  },
  data () {
    return {
      tableInfo: {
        list: [],
        columns: [],
        loading: false
      },
      headerFields: {},
      footerFields: {},
      isStopPage: true, // 默认是停用页面
      uploadAttachement: {}
    }
  },
  mounted () {
    this.getViewPageDetails();
  },
  methods: {
    // 设置表格表列
    setTableColumns () {
      /*
        替代商品编码 - 启用时不展示，停用展示
        上次停用原因 - 停用时不展示，启用展示
      */
      const columns = [
        { title: 'SKU编码', key: 'skuNo' },
        { title: '商品名称', key: 'productName' },
        { title: '停/启用状态', key: 'enableStatusStr' },
        { title: '规格', key: 'spec' },
        { title: '计量单位', key: 'unitName' },
        { title: '替代商品编码', key: 'replaceSkuNo', notShow: !this.isStopPage },
        { title: '替代商品名称', key: 'replaceProductName' },
        { title: '替代商品规格', key: 'replaceSpec' },
        { title: '替代商品计量单位', key: 'replaceUnitName' },
        { title: '近1年销量', key: 'sales' },
        { title: '上次停用原因', key: 'reason', notShow: this.isStopPage },
        { title: '商品准入时间', key: 'prepareTime' }
      ];
      this.tableInfo.columns = columns.filter(item => !item.notShow);
    },
    // 设置表头字段
    setHeaderFields (data) {
      this.headerFields = {
        commitReasonType: data.commitReasonType,
        commitReasonTypeStr: getEchoByOptions(data.commitReasonType, STOP_REASON_OPTIONS),
        commitReason: data.commitReason,
        regionAdviceRecordNo: data.regionAdviceRecordNo,
        isFollowShelfStr: data?.isFollowShelfStr
      }
    },
    // 设置表尾字段
    setFooterFields (data) {
      const keys = {
        auditReason: 'auditReason',
        auditorName: 'auditorName',
        commitState: 'auditState',
        commitStateStr: 'auditStateStr',
        pushTime: 'opeTime',
        pusherAreaName: 'operAreaName',
        pusherDeptName: 'operDeptName',
        pusherName: 'operName'
      }
      this.footerFields = getFooterFieldsByReprocessed(data, keys);
    },
    // 获取查看页面详情
    async getViewPageDetails () {
      const { recordNo } = this.$route.query;
      if (!recordNo) { return false; }
      const data = { recordNo }
      const retData = await getViewDetailsService(data, '.view_wrap');
      if (retData) {
        this.isStopPage = retData.enableStatus === '2';
        this.setTableColumns();
        this.setHeaderFields(retData);
        this.setFooterFields(retData);
        this.tableInfo.list = retData.details;
        this.uploadAttachement = {
          isFile: retData?.attachmentInfoDTO?.attachmentType == ATTACHEMENT_TYPE.File,
          defaultFiles: retData?.attachmentInfoDTO?.detailList.map(item => ({
            url: item?.previewUrl,
            name: item?.attachmentName,
          }))
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.header_fields_card {
  span {
    display: inline-block;
    margin-right: 30px;
  }
}
</style>
